<template>
  <div>
    <ul>
      <li v-for="(menu,idx) in menus" @click="changeMenu(idx)" :class="{active:selected===idx}">{{menu}}</li>
    </ul>
    <input type="text" v-model="current">
    <button @click="testHandler(current)">test</button>
  </div>
</template>

<script>
    export default {
      name: "Menu",
      props:["menus"],
      data(){
        return {
          selected:0,
          current:0
        }
      },
      methods:{
        changeMenu(idx){
          console.log(idx);
          this.selected = idx;
        },
        testHandler(current){
          current = parseInt(current);
          this.changeMenu(current);
          this.selected = current;
          console.log(typeof current);
        }
      }
    }
</script>

<style scoped>
  li{
    cursor: pointer;
  }
  .active{
    font-weight: bold;
    color:#f80;
  }
</style>
